<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生</title>
    <!--引入的vue.js-->
    <script src="/js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="/css/index.css">
    <!--引入elementUI的js-->
    <script src="/js/index.js"></script>
    <!--引入axios.js-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app" class="app1">

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
<script>
new Vue({
    el: '#app',
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 10,

        }
    },
    created() { //页面加载时执行
        this.loadData();
    },
    methods: {

        loadData() {
            let _this = this;
            // 向给定ID的用户发起请求
            axios.post('/stu/queryPage', {
                "pageNo": this.currentPage, "pageSize": this.pageSize,
                "data": {

                }
            })
                .then(function (response) {
                    // 处理成功情况
                    console.log(response);
                    //JSON.stringify  json对象转字符串
                    console.log(JSON.stringify(response));
                    //请求成功判断
                    if (response.data.code == 200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total;
                    }
                })
                .catch(function (error) {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },
        //每页数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            //让每页显示数量变化
            this.pageSize = val;
            //调用加载数据方法
            this.loadData();
        },
        //当前页码发生变化 第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            //调用加载数据方法
            this.loadData();
        },

    }

 })



</script>


</body>
</html>